:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    /*--info: #17a2b8;*/
    --info: #009688;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('//at.alicdn.com/t/webfont_4ea5rzn0cr.eot'); /* IE9*/
    src: url('//at.alicdn.com/t/webfont_4ea5rzn0cr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/webfont_4ea5rzn0cr.woff2') format('woff2'),
    url('//at.alicdn.com/t/webfont_4ea5rzn0cr.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/webfont_4ea5rzn0cr.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/webfont_4ea5rzn0cr.svg#NotoSansHans-DemiLight') format('svg'); /* iOS 4.1- */
}

* {
    margin: 0;
    padding: 0;
    color: var(--dark);
}

html, body {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

body {
    font-size: 15px;
    font-family: "webfont" !important;
    font-style: normal;
    /*background-size: auto;*/
    /*background-color: #ece5da;*/
    /*background-image: url(https://img.bidianer.com/skin/002.jpg);*/

    /*content: "";*/
    /*background-position: top;*/
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
}

a, img, i {
    cursor: pointer;
}


a {
    text-decoration: none;
    cursor: pointer;
    color: #333;
}

a:hover {
    color: #409EFF;
    /*animation-name: custAnimation;*/
}

.activeAnimation {
    animation-name: custAnimation;
}

@keyframes custAnimation {
    0% {
        /*transform: translate3d(1px, 0, 0)*/
        transform: translateX(1px)
    }
    100% {
        /*opacity: 1*/
        /*transform: translate3d(3px, 0, 0)*/
        transform: translateX(5px)
        /*transform: translate(-50%,-50%)*/
    }
}

.enlargeAnimation {
    /*border-radius: 3px;*/
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

.enlargeAnimation:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.show {
    display: block;
}

.hide {
    display: none;
}

.card {
    box-shadow: 0 0 18px rgba(70, 70, 40, .255);
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
}

a, span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.active-top {
    color: #409EFF;
    border-top: 2px solid #409EFF;
}


.active-bottom {
    color: #409EFF;
    border-bottom: 2px solid #409EFF;
}

.tips {
    padding: 2px 5px;
    background-color: cornsilk;
    border: 1px solid lightgrey;
    border-radius: 3px;
    font-size: 13px;

    display: grid;
    line-height: 25px;
}

.content-wd {
    width: 90vw;
    max-width: 800px;
}


.btn {
    height: 100%;
    outline: none;
    border: none;
    cursor: pointer;
    color: white;
    background-color: #409eff;
    border-radius: 5px;
    padding: 5px 8px;
}

.btn:hover {
    background-color: #4070ff;
}

.btn-warn {
    background-color: orange;
}


.btn-warn:hover {
    background-color: #eb9904;
}


.btn-error {
    background-color: orangered;
}

.btn-error:hover {
    background-color: red;
}


.srcoll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.srcoll::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

.srcoll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #FFF;
    /*background-color: var(--primary);*/
    background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
}

@media screen and (max-width: 600px) {
    body {
        font-size: 13px;
    }

    .tips {
        font-size: 12px;
    }
}
